@import '@wordpress/base-styles/colors';

$admin-bar-height: 32px;
$layout-spacing: 16px;
$sidebar-width: 350px;
$chat-header-height: 38px;
$main-border-radius: 8px;
$transition-duration: 0.2s;
$transition-timing: $transition-duration cubic-bezier( 0.4, 0, 0.2, 1 );

@mixin sidebar-base( $main-container-selector ) {
	background-color: $gray-900 !important;

	#{$main-container-selector} {
		will-change: width, margin, border-radius;
		transition:
			width $transition-timing,
			margin $transition-timing,
			border-radius $transition-timing;
	}
}

@mixin sidebar-open-base( $main-container-selector ) {
	#{$main-container-selector} {
		width: calc( 100% - $sidebar-width - $layout-spacing ) !important;
		margin: $layout-spacing;
		border-radius: $main-border-radius;
		overflow: hidden;
	}

	.agents-manager-chat--docked {
		visibility: visible;
		// Prevent the embedded chat from overlapping the main container during transition
		animation: agents-manager-delay-visibility $transition-duration;
		z-index: unset;
	}

	.agents-manager-sidebar-fab {
		display: none;
	}
}

@keyframes agents-manager-delay-visibility {
	from,
	99% {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

// Reposition the editor's template save confirmation panel
@mixin editor-save-panel-open( $save-panel-selector ) {
	#{$save-panel-selector} {
		margin: $layout-spacing 0;
		right: $sidebar-width;
		overflow: hidden;
		border-radius: 0 $main-border-radius $main-border-radius 0;

		.editor-layout__toggle-entities-saved-states-panel {
			right: $sidebar-width;
			margin-bottom: $layout-spacing;
			border-bottom-right-radius: $main-border-radius;
		}
	}
}

// TODO: AI-679 will fix it...
/* WP Admin */
$admin-menu-width-unified: 272px;
$admin-menu-width-classic: 160px;
$admin-menu-width-folded: 37px;
$admin-content-top: calc( $admin-bar-height + $layout-spacing );
$admin-content-height: calc( 100vh - $admin-bar-height - ( $layout-spacing * 2 ) );
$border-color: #545454;
$admin-background-color: #f1f1f1;

// Mixin for wp-admin sidebar open styles
// Used by both body-level and #wpwrap-level containers
@mixin wp-admin-sidebar-open-general() {
	#wpadminbar {
		position: fixed !important;
		top: $layout-spacing;
		left: $layout-spacing;
		right: $sidebar-width;
		width: auto !important;
		border-radius: $main-border-radius $main-border-radius 0 0;
		border: 1px solid $border-color;
		border-bottom: none;
	}

	#adminmenuback,
	#adminmenuwrap {
		position: fixed !important;
		top: $admin-content-top;
		left: $layout-spacing;
		bottom: $layout-spacing;
		height: $admin-content-height !important;
		border-left: 1px solid $border-color;
		border-bottom: 1px solid $border-color;
		border-radius: 0 0 0 $main-border-radius;
		overflow: scroll;
	}

	#wpcontent {
		margin-right: $sidebar-width !important;
	}

	#wpbody {
		position: fixed !important;
		top: $admin-content-top;
		right: $sidebar-width;
		bottom: $layout-spacing;
		height: $admin-content-height !important;
		max-height: $admin-content-height !important;
		min-height: 0;
		box-sizing: border-box;
		padding-left: $layout-spacing;
		border-radius: 0 0 $main-border-radius 0;
		border: 1px solid $border-color;
		border-top: none;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: $admin-background-color;
		margin: 0 !important;
	}

	#wpfooter {
		margin-right: calc( $sidebar-width + 1px ) !important;
		bottom: 17px;
		left: 18px;
		background-color: $admin-background-color;
		border-radius: 0 0 $main-border-radius 0;
	}

	.agents-manager-chat--docked {
		visibility: visible;
		// Prevent the embedded chat from overlapping the main container during transition
		animation: agents-manager-delay-visibility $transition-duration;
		z-index: unset;
	}

	.agents-manager-sidebar-fab {
		display: none;
	}
}

@mixin wp-admin-sidebar-open-specific( $admin-menu-width ) {
	#wpcontent {
		margin-left: calc( $admin-menu-width + $layout-spacing ) !important;
	}

	#wpbody {
		left: calc( $admin-menu-width + $layout-spacing );
		width: calc( 100% - $admin-menu-width - $layout-spacing - $sidebar-width ) !important;
	}
}

// When container is body (legacy behavior)
body.wp-admin:has( #wpwrap.agents-manager-sidebar-container--sidebar-open ),
body.is-nav-unification.wp-admin.agents-manager-sidebar-container--sidebar-open,
body.folded.wp-admin.agents-manager-sidebar-container--sidebar-open,
body.wp-admin.agents-manager-sidebar-container--sidebar-open {
	background-color: $gray-900;
	@include wp-admin-sidebar-open-general();
}

body.is-nav-unification.wp-admin.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-specific( $admin-menu-width-unified );
}

body.folded.wp-admin.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-specific( $admin-menu-width-folded );
}

body.wp-admin.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-specific( $admin-menu-width-classic );
}

body.is-nav-unification #wpwrap.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-specific( $admin-menu-width-unified );
}

body #wpwrap.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-general();
	@include wp-admin-sidebar-open-specific( $admin-menu-width-classic );
}

body.folded #wpwrap.agents-manager-sidebar-container--sidebar-open {
	@include wp-admin-sidebar-open-general();
	@include wp-admin-sidebar-open-specific( $admin-menu-width-folded );
}

#wp-admin-bar-top-secondary {
	border-radius: $main-border-radius $main-border-radius 0 0 !important;
}

// TODO: This solution will impact other pages, we need to find a better way in AI-679...
/* Calypso */
body:not( .wp-admin ).agents-manager-sidebar-container {
	@include sidebar-base( '#wpcom #content' );

	#content {
		background-color: #fcfcfc !important;
	}

	&.agents-manager-sidebar-container--sidebar-open {
		@include sidebar-open-base( '#wpcom #content' );

		#header {
			top: $layout-spacing;
			left: $layout-spacing;
			right: $sidebar-width;
			width: auto;
			overflow: hidden;
			border-top-left-radius: $main-border-radius;
			border-top-right-radius: $main-border-radius;
		}

		#content {
			top: $layout-spacing;
			left: $layout-spacing;
			height: calc( 100vh - ( $layout-spacing * 2 ) );
			min-height: unset;
			margin: 0 !important;
		}

		#secondary {
			top: calc( $layout-spacing + $admin-bar-height );
			left: $layout-spacing;
			bottom: $layout-spacing;
			overflow: hidden;
			border-top-left-radius: $main-border-radius;
			border-bottom-left-radius: $main-border-radius;
		}
	}
}

// TODO: AI-679 will fix it...
/* Next Admin editor */
.next-admin.agents-manager-sidebar-container {
	@include sidebar-base( '.next-admin-layout__canvas.is-full-canvas' );

	&.agents-manager-sidebar-container--sidebar-open {
		@include sidebar-open-base( '.next-admin-layout__canvas.is-full-canvas' );
		@include editor-save-panel-open(
			'.admin-ui-navigable-region.interface-interface-skeleton__actions'
		);
	}
}

// TODO: AI-679 will fix it...
/* Site editor */
#site-editor .agents-manager-sidebar-container {
	@include sidebar-base( '.edit-site-layout__canvas' );

	// Delay to prevent flickering when closing the left navigation sidebar
	&:not( .agents-manager-sidebar-container--sidebar-open ) .edit-site-layout__canvas {
		transition-delay: 0.1s;
	}

	&.agents-manager-sidebar-container--sidebar-open {
		@include sidebar-open-base( '.edit-site-layout__canvas' );
		@include editor-save-panel-open(
			'.interface-navigable-region.interface-interface-skeleton__actions'
		);
	}
}

// TODO: AI-679 will fix it...
/* Page editor */
.block-editor .agents-manager-sidebar-container {
	@include sidebar-base( '.edit-post-layout' );

	.edit-post-layout {
		width: 100%;
	}

	&.agents-manager-sidebar-container--sidebar-open {
		@include sidebar-open-base( '.edit-post-layout' );
		@include editor-save-panel-open(
			'.interface-navigable-region.interface-interface-skeleton__actions'
		);
	}
}

.agents-manager-chat--docked {
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	padding: $layout-spacing;
	width: $sidebar-width;
	box-sizing: border-box;
	z-index: 999999;

	.agents-manager-chat-header {
		position: absolute;
		top: 0;
		width: 100%;
		height: $chat-header-height;
		margin: 0;
		padding: 0;

		&__title {
			color: $gray-100;
		}

		&__back-btn,
		&__more-options,
		&__history-btn,
		&__close-btn {
			svg {
				fill: $gray-100;
			}

			& .components-dropdown-menu__toggle.has-icon,
			&.has-icon {
				min-width: unset;
				width: 32px;
				height: 32px;
				padding: 0;
			}
		}

		&__back-btn svg {
			margin-left: 0;
		}
	}

	.agents-manager-conversation-history-view {
		padding-top: 48px;

		&__content,
		&__footer {
			padding: 0;
		}

		&__loading,
		&__error,
		&__empty {
			color: $white;
		}
	}

	.agents-manager-conversation-list-item {
		&:hover {
			background-color: rgba( 255, 255, 255, 0.05 );
		}

		&:focus {
			background-color: rgba( 255, 255, 255, 0.08 );
		}

		&__text,
		&__title {
			color: var( --color-foreground-inverted, #eff0f1 );
		}
	}

	.agents-manager-conversation-list-skeleton {
		&__item {
			border-color: #464646;
		}

		&__avatar,
		&__title,
		&__subtitle {
			background-color: rgba( 255, 255, 255, 0.1 );
		}
	}

	.agents-manager-chat-message-skeleton {
		&__bubble {
			background-color: #484848;
		}

		&__bubble &__line {
			background-color: rgba( 255, 255, 255, 0.3 ) !important;
		}

		&__line {
			background-color: rgba( 255, 255, 255, 0.15 ) !important;
		}
	}

	.agents-manager-sidebar-fab {
		visibility: visible;
		position: fixed;
		bottom: 16px;
		right: 16px;
		width: 56px;
		height: 56px;
		border-radius: 24px;
		background-color: #fcfcfc;
		color: #3858e8;
		box-shadow:
			0 0 0 1px rgba( 0, 0, 0, 0.075 ),
			0 2px 24px rgba( 0, 0, 0, 0.075 );

		svg {
			width: 32px;
			height: 32px;
		}
	}
}

/* Agenttic UI: Styles for both docked and undocked chat */
.agenttic {
	.Messages-module_container {
		padding-bottom: 24px;

		&.Messages-module_emptyState {
			justify-content: start;
		}

		.EmptyView-module_container {
			height: auto;
			padding-block: 8px;
		}
	}

	.ChatFooter-module_container:has( .Suggestions-module_container ) {
		margin-top: 48px;
	}
}

/* Agenttic UI: Styles for the docked chat */
.agents-manager-chat--docked .agenttic {
	.ConversationView-module_container {
		position: relative;
	}

	.Messages-module_container {
		margin-top: $chat-header-height;
		padding-top: 0;

		// Push messages to the bottom while maintaining scroll functionality in a dynamic height container
		> *:first-child {
			margin-top: auto;
		}
	}

	.Message-module_message {
		color: $white;
		font-size: 0.875rem;
		line-height: 1.6;

		p {
			font-size: inherit;
			line-height: inherit;
		}

		ul {
			list-style: disc;
		}

		a {
			color: $white;
		}

		.big-sky__dock__menu__variation-picker {
			min-height: unset;

			.edit-site-global-styles-variations_item {
				&.is-active,
				&:focus-visible {
					.edit-site-global-styles-variations_item-preview {
						outline: 1px solid $gray-400;
						outline-offset: 1px;
						outline-color: #ccc;
						outline-width: -wp-admin-border-width-focus;
					}
				}

				&:not( .is-active ):hover {
					.edit-site-global-styles-variations_item-preview {
						outline-color: $gray-600;
					}
				}

				.edit-site-global-styles-variations_item-preview {
					outline-color: #545454;
					overflow: hidden;
				}
			}
		}

		.big-sky__item-picker__arrows,
		.big-sky__completed-plan {
			.components-button {
				color: $gray-700;

				&:not( :disabled ):hover {
					color: $gray-100;
				}

				&:disabled {
					opacity: 0.5;
				}

				&.is-pressed {
					color: $gray-100;
					background-color: #484848;
				}
			}
		}

		.big-sky__item-picker__arrows {
			bottom: -42px;
		}

		.big-sky__item-picker__pager {
			color: $gray-400;
		}
	}

	// Prevent item picker content overflow (e.g., Patterns)
	.Message-module_content {
		width: 100%;

		// Fix extra top margin on the first paragraph
		.Message-module_bubble > p:first-of-type {
			margin-top: 0;
		}
	}

	.Message-module_user {
		padding: 0 12px;

		.Message-module_bubble {
			border-radius: 24px 24px 8px 24px;
			background: #484848;

			p {
				color: $gray-100;
				margin: 0;
			}
		}
	}

	.EmptyView-module {
		&_container {
			width: 100%;
			height: auto;
			align-items: start;
			padding: 0;
		}

		&_icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 12px;

			svg {
				width: 32px;
				height: 32px;
				color: $white;
			}
		}

		&_heading,
		&_help {
			font-size: 0.875rem;
			line-height: 1.6;
			color: $white;
			padding: 0 12px;
		}

		&_suggestionsWrapper .Suggestions-module_container {
			flex-direction: column;
			gap: 0;
			padding: 0;

			.button-module_button {
				width: 100%;
				height: unset;
				justify-content: start;
				border-radius: 0;
				background-color: unset;
				padding: 14px 16px;
				color: $gray-200;
				font-size: 13px;
				line-height: 20px;
				border: 1px solid #545454;

				&:hover {
					background-color: $gray-800;
				}

				&:focus-visible {
					outline-offset: -3px;
					outline-color: var( --wp-admin-theme-color );
				}
			}

			> div + div .button-module_button {
				margin-top: -1px;
			}

			> div:only-of-type .button-module_button {
				border-radius: 8px;
			}

			> div:first-of-type:not( :only-of-type ) .button-module_button {
				border-radius: 8px 8px 0 0;
			}

			> div:last-of-type:not( :only-of-type ) .button-module_button {
				border-radius: 0 0 8px 8px;
			}
		}
	}

	.ChatFooter-module_container {
		background-color: $gray-800;
		transition: margin-top 0.3s ease;

		.Suggestions-module_container .button-module_outline {
			color: $gray-100;
			background-color: #484848;
		}

		.Notice-module_container {
			background-color: $gray-900;

			.Notice-module_content {
				color: $gray-100;

				p {
					margin: 0;
				}
			}
		}
	}

	.Textarea-module_textarea {
		color: $gray-200;
		font-size: 0.875rem;
		line-height: 1.625;
		box-shadow: none;
	}

	.ChatInput-module_button:disabled {
		background-color: $gray-700;
		color: $gray-400;
	}

	.agents-manager-selected-block {
		color: $white;
		border: 1px solid rgba( $white, 0.1 );
		margin-top: 8px;

		&__divider {
			border-left: 1px solid rgba( $white, 0.1 );
		}

		&__remove {
			&.components-button {
				color: $white;
			}
		}
	}
}

/* Agenttic UI: Styles for the undocked chat */
.agents-manager-chat--undocked .agenttic {
	// Fix the undocked chat overlapping with the nav menu
	z-index: 9999;
}
